<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>图片列表</title>
		<link rel="stylesheet" href="../../front-end-of-black-horse/CSS/03-layout/css/reset.css">
		<style>
            /*img {*/
            /*    display: block;*/
            /*    margin-top: 10px;*/
            /*}*/

            /*div {*/
            /*    width: 100px;*/
            /*    height: 100px;*/
            /*}*/


            /*
                写css样式的时候一定要注意一个层级关系,最外层的放在最上面
            */
            body {
                background-color: antiquewhite;
            }

            .img-list {
                /*设置ul的宽度*/
                width: 190px;
                /*设置ul的高度*/
                height: 470px;
                /*裁减溢出的内容*/
                overflow: hidden;
                /* 使ul在页面中居中(实际事例中不需要这么写)*/
                margin: 50px auto;

                background-color: #F4F4F4;
            }


            /*
             设置li的位置
             */
            .img-list li:not(:last-child) {
                margin-bottom: 9px;
            }


            /*
                设置图片的大小
            */
            .img-list img {
                width: 100%;

            }


		</style>
	</head>
	<body>

		<!--		<div>-->
		<!--			<img src="./img/01/1.jpg"/>-->
		<!--			<img src="./img/01/2.jpg"/>-->
		<!--			<img src="./img/01/3.jpg"/>-->
		<!--		</div>-->

		<!--
			这种写法比较推荐
		-->
		<ul class="img-list">
			<li>
				<a href="javascript:;">
					<img src="./img/01/1.jpg" alt=""/>
				</a>
			</li>
			<li>
				<a href="javascript:;">
					<img src="./img/01/2.jpg" alt=""/>
				</a>
			</li>
			<li>
				<a href="javascript:;">
					<img src="./img/01/3.jpg" alt=""/>
				</a>
			</li>
		</ul>


	</body>
</html>
